<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品标题</th>
    <th>商品价格</th>
    <th>商品销量</th>
  </tr>
</table>
<script>
  //实例化对象  空对象
  let p1 ={};
  //动态添加属性和方法
  p1.name="mcl";
  p1.age=18;
  p1.run =function () {
    console.log(this.name+":"+this.age);
  }
  //调用对象方法
  p1.run();

  let p2={
    name:"lll",
    age:21,
    run:function () {
      console.log(this.name +":"+this.age);
    }
  }
  p2.run();

  //将多个信息封装到一个对象中
  let arr=[{title:"小米手机",price:5000,salaCount:200},
    {title:"华为nova8",price:2400,salaCount:100},
    {title:"荣耀20",price:2999,salaCount:20},
    {title:"苹果14pro max",price:10000,salaCount:2},];
  let table =document.querySelector("table");
//遍历数组
  for (let product of arr){
    let tr =document.createElement("tr");
    let titleTd =document.createElement("td");
    let priceTd =document.createElement("td");
    let salaCountTd =document.createElement("td");
    titleTd.innerText =product.title;
    priceTd.innerText =product.price;
    salaCountTd.innerText =product.salaCount;
    tr.append(titleTd,priceTd,salaCountTd);
    //把tr装进table
    table.append(tr);
  }

</script>
</body>
</html>